<template>
	<div id="hotelOrderDetail">
		<div>
			<header>
				<p>
					<span>订单号：</span>
					<b>{{data.OrderId}}</b>
				</p>
				<p>
					<span>外部订单号：</span>
					<b>{{data.ElongCardNo}}</b>
				</p>
				<p>
					<span>供应商：</span>
					<b>艺龙  待定。。。。。</b>
				</p>
				<p>
					<span>订单状态：</span>
					<b>{{data.Status|hotelStatus}}</b>
				</p>
			</header>
			<div>
				<Title :text="'支付信息'"/>
				<div class="payMess">
					<p>
						<b class="money">￥{{data.TotalPrice}}</b>
						<!--<span>X</span>
						<span>3</span>-->
					</p>
					<p class="smallFont">
						<span>订单总价</span>
					</p>
					<p>
						<span>支付方式：</span>
						<b>{{data.PaymentType}}</b>
					</p>
					<p class="smallFont">
						<span>支付流水号：</span>
						<span>待定。。。。</span>
					</p>
				</div>
				<Title :text="'酒店详情'"/>
				<div class="hotelMess">
					<table>
						<tr>
							<th>酒店名</th>
							<th>房型</th>
							<th>入住日期</th>
							<th>离店日期</th>
							<th>房间数</th>
							<th>单价</th>
							<th>付款类型</th>
							<th>状态</th>
						</tr>
						<tr>
							<td>{{data.HotelName}}</td>
							<td>{{data.RoomTypeName}}</td>
							<td>{{data.ArrivalDate}}</td>
							<td>{{data.DepartureDate}}</td>
							<td>{{data.NumberOfRooms}}</td>
							<td>{{data.CustomerPrice}}</td>
							<td>{{data.PaymentType}}</td>
							<td>{{data.Status|hotelStatus}}</td>
						</tr>
					</table>
				</div>
				<Title :text="'入住人'"/>
				<div class="guestMess">
					<table>
						<tr>
							<th>room</th>							
							<th>姓名</th>
							<th>性别</th>
							<th>电话</th>							
						</tr>
						<tbody v-for="room in data.OrderRooms">
							<tr v-for="customer in room.Customers">
								<td>{{room.RoomNo}}</td>
								<td>{{customer.Name}}</td>
								<td>{{customer.Gender|gender}}</td>							
								<td>{{customer.Mobile}}</td>							
							</tr>
						</tbody>
					</table>
				</div>
				<Title :text="'联系人'"/>
				<div class="connectMess">
					<table>
						<tr>
							<th>姓名</th>
							<th>电话</th>							
						</tr>
						<tr>
							<td>{{data.Contact.Name}}</td>
							<td>{{data.Contact.Mobile}}</td>							
						</tr>
					</table>
				</div>
				<!--<Title :text="'备注日志'"/>
				<div class="logMess">
					<table>
						<tr>
							<th>序号</th>
							<th>姓名</th>							
							<th>时间</th>							
							<th>操作</th>							
							<th>备注</th>							
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
							<td>5</td>							
						</tr>
					</table>
				</div>-->
			</div>
		</div>
	</div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import "../../../style/mixin.scss";
	@import "./style.scss";
</style>